<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
</head>

<body>
  <div class="x-body">

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
    <!-- 按分类统计帖子 -->
    <div id="cate" style="width: 100%;height:700px;"></div>


  </div>
</body>
</html>
<script src="/assets/admin/js/echarts.min.js"></script>
<script>
  //获取数据
  var catelist = `{$catelist}`
  //将json转为 JS 数组
  catelist = JSON.parse(catelist);

  //已结
  var acceptList =  `{$AcceptList}`
  acceptList = JSON.parse(acceptList);

  //未结
  var notAcceptList = `{$NotAcceptList}`
  notAcceptList = JSON.parse(notAcceptList);

  //基于准备好的dom，初始化echarts实例
  var chartDom = echarts.init(document.getElementById('cate'));
  
  // 指定图表的配置项和数据
  var option = {
    //标题
    title: {
      text: '按分类统计帖子'
    },
    //提示框组件
    tooltip: {
      trigger: 'axis', //触发类型
      axisPointer: {
        type: 'shadow' //设置显示为阴影
      }
    },
    // 图例单元组件
    legend: {},
    //设置网格
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true //自动设置坐标轴位置
    },
    // X轴  数值
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    // Y轴 分类名字
    yAxis: {
      type: 'category',
      data: catelist
    },
    series: [
      {
        name: '已采纳',
        type: 'bar',
        itemStyle:{
          normal:{
            color: '#f47920'
          }
        },
        data: acceptList
      },
      {
        name: '未采纳',
        type: 'bar',
        data: notAcceptList,
        itemStyle:{
          normal:{
            color: '#bed742'
          }
        }
      }
    ]
  }

  chartDom.setOption(option)

</script>